<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        
        <ul>
            <li v-for="item in goods">商品名称:------{{item.name}}, 数量:---------{{item.num}},价格:------------{{item.price}}</li>
        </ul>
        <!-- methods里面的功能 -->
        <!-- <h2>商品总价:{{getTotalPrice()}}</h2>
        <h2>商品总价:{{getTotalPrice()}}</h2>
        <h2>商品总价:{{getTotalPrice()}}</h2>
        <h2>商品总价:{{getTotalPrice()}}</h2>
        <h2>商品总价:{{getTotalPrice()}}</h2>
        <h2>商品总价:{{getTotalPrice()}}</h2> -->

        <!-- computed计算属性 缓存 -->
        <h2>商品总价:{{totalPrice}}</h2>
        <h2>商品总价:{{totalPrice}}</h2>
        <h2>商品总价:{{totalPrice}}</h2>
        <h2>商品总价:{{totalPrice}}</h2>
        <h2>商品总价:{{totalPrice}}</h2>
        <h2>商品总价:{{totalPrice}}</h2>
        <h2>商品总价:{{totalPrice}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                goods:[
                    {id:100, name:"槟榔", num:10, price:95},
                    {id:100, name:"芙蓉王", num:5, price:25},
                    {id:100, name:"zeppo打火机", num:8, price:2.5},
                    {id:100, name:"杨玉虎年限定", num:999, price:168},
                    {id:100, name:"6个核弹", num:6, price:999},
                    {id:100, name:"核显卡", num:100, price:1195},
                    {id:100, name:"旺仔牛奶", num:23, price:5},
                ]
            },
            methods:{
                getTotalPrice: function(){
                    console.log("---------------getTotalPrice被调用了");
                    var result = 0;//存总价 undefined
                    for(var i = 0; i < this.goods.length; i++){
                        result += this.goods[i].price; 
                    }
                    return result;
                }
            },
            //计算属性
            computed:{
                //简写
                totalPrice:function(){
        
                    console.log("---------------totalPrice被调用了");
                    var result = 0;//存总价 undefined
                    for(var i = 0; i < this.goods.length; i++){
                        result += this.goods[i].price; 
                    }
                    return result;
                }

                //完整写法
                // totalPrice:{
                //     // 不推荐你将set函数暴漏 只读属性
                //     // 得到 - 读取 自动调用
                //     get:function(){
                //         // 第一次调用的时候执行了这个代码
                //         console.log("++++++++++get被调用了");
                //         var result = 0;//存总价 undefined
                //         for(var i = 0; i < this.goods.length; i++){
                //             result += this.goods[i].price; 
                //         }
                //         return result;
                //     },
                //     // 设置 - 写入(修改)
                //     set:function(newValue){
                //         // 降价 
                //         for(var i = 0; i < this.goods.length; i++){
                //             this.goods[i].price -= 5;
                //         }
                //         console.log("++++++++++set被调用了", newValue);
                //     }
                // }
                // 简写
                // totalPrice:{
                //     get:function(){
                //         // 第一次调用的时候执行了这个代码
                //         console.log("++++++++++get被调用了");
                //         var result = 0;//存总价 undefined
                //         for(var i = 0; i < this.goods.length; i++){
                //             result += this.goods[i].price; 
                //         }
                //         return result;
                //     }
                // }
                
            }
        })
    </script>
</body>
</html>